<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head>
	<title>Edit in Place with JavaScript and CSS</title>

	<link rel="stylesheet" href="css/slides.css" type="text/css"/>
	
	<script type="text/javascript" src="toolman/core.js"></script>
	<script type="text/javascript" src="toolman/events.js"></script>
	<script type="text/javascript" src="toolman/css.js"></script>
	<script type="text/javascript" src="toolman/coordinates.js"></script>
	<script type="text/javascript" src="toolman/drag.js"></script>
	<script type="text/javascript" src="toolman/dragsort.js"></script>
	
	<script>
	<!--
	var coordinates = ToolMan.coordinates()
	var dragsort = ToolMan.dragsort()
	
	window.onload = function() {
		dragsort.makeListSortable(document.getElementById("slideshow"))
	}
	//-->
	</script>
</head>

<body>
<h2>Slideshow Sorter</h2>

<ul id="slideshow" class="slideshow">
	<li class="slide">
		<div class="thumb handle"><img src="img/2.png"/></div>
		<div id="twoView" class="view">Slide 2</div>
	</li>
	<li class="slide">
		<div class="thumb handle"><img src="img/3.png"/></div>
		<div id="threeView" class="view">Slide 3</div>
	</li>
	<li style="opacity: 1; z-index: auto; top: 0px; left: 0px;" class="slide">
		<div class="thumb handle"><img src="img/1.png"/></div>
		<div id="oneView" class="view">Slide 1</div>
	</li><li class="slide">
		<div class="thumb handle"><img src="img/4.png"/></div>
		<div id="fourView" class="view">Slide 4</div>
	</li>
	<li class="slide">
		<div class="thumb handle"><img src="img/5.png"/></div>
		<div id="fiveView" class="view">Slide 5</div>
	</li>
	<li class="slide">
		<div class="thumb handle"><img src="img/6.png"/></div>
		<div id="sixView" class="view">Slide 6</div>
	</li>
	<li class="slide">
		<div class="thumb handle">Only text!!</div>
		<div id="sevenView" class="view">Slide 7</div>
	</li>
</ul>
</body></html>